<template>
  <div>
    <!-- custom information -->
    <div v-if="adminType == 0" style="text-align: center; padding-bottom: 24px">
      <img class="head-img" alt="Vue logo" src="@/assets/lks/face1.gif" />
      <h2>
        {{ basicData.name }}
      </h2>
      <div>
        <el-tag style="margin: 6px"
          >性别<i v-if="getItemValue('性别') == '男'" class="el-icon-male"></i>
          <i v-else class="el-icon-female"></i
        ></el-tag>

        <el-tag style="margin: 6px">{{ age }}岁</el-tag>
        <el-tag style="margin: 6px">{{ constellation }}座</el-tag>
      </div>
    </div>
    <!-- basic information -->
    <el-divider>基础信息</el-divider>
    <el-table :data="topData" style="width: 100%">
      <el-table-column prop="itemTitle" label="信息"> </el-table-column>
      <el-table-column prop="itemValue" label="内容"> </el-table-column>
      <el-table-column
        label="操作"
        :width="viewSize.width > viewSize.threshold ? 150 : 60"
      >
        <template slot-scope="scope">
          <!-- regular -->
          <el-button
            v-if="
              scope.row.itemTitle == '密码' &&
              viewSize.width > viewSize.threshold &&
              adminType == 0
            "
            type="primary"
            size="small"
            @click="editPasswd = true"
            >修改密码</el-button
          >
          <el-button
            v-if="
              scope.row.itemTitle == '密码' &&
              viewSize.width > viewSize.threshold &&
              adminType == 1
            "
            type="info"
            size="small"
            disabled
            >无权操作</el-button
          >
          <el-button
            v-if="
              scope.row.itemTitle == '密码' &&
              viewSize.width > viewSize.threshold &&
              adminType == 2
            "
            type="danger"
            size="small"
            @click="resetPasswd"
            >重置密码</el-button
          >
          <!-- small -->
          <el-button
            v-if="
              scope.row.itemTitle == '密码' &&
              viewSize.width <= viewSize.threshold &&
              adminType == 0
            "
            type="primary"
            size="small"
            icon="el-icon-edit"
            circle
            @click="editPasswd = true"
          ></el-button>
          <el-button
            v-if="
              scope.row.itemTitle == '密码' &&
              viewSize.width <= viewSize.threshold &&
              adminType == 1
            "
            type="info"
            size="small"
            icon="el-icon-refresh-left"
            circle
            disabled
          ></el-button>
          <el-button
            v-if="
              scope.row.itemTitle == '密码' &&
              viewSize.width <= viewSize.threshold &&
              adminType == 2
            "
            type="danger"
            size="small"
            icon="el-icon-refresh-left"
            circle
            @click="resetPasswd"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- extention information -->
    <el-divider>扩展信息</el-divider>
    <el-table :data="extentionData" style="width: 100%">
      <el-table-column prop="itemTitle" label="信息"> </el-table-column>
      <el-table-column prop="itemValue" label="内容"> </el-table-column>
      <el-table-column
        label="操作"
        :width="viewSize.width > viewSize.threshold ? 150 : 60"
      >
        <template slot-scope="scope">
          <!-- regular -->
          <el-button
            v-if="
              viewSize.width > viewSize.threshold &&
              (adminType == 0 || adminType == 2)
            "
            type="primary"
            size="small"
            @click="editorOpen(scope.row.itemTitle, scope.row.itemValue)"
            >修改</el-button
          >
          <el-button
            v-if="viewSize.width > viewSize.threshold && adminType == 2"
            type="danger"
            size="small"
            @click="deleteItem(scope.row.itemTitle, scope.row.itemValue)"
            >删除</el-button
          >
          <el-button
            v-if="viewSize.width > viewSize.threshold && adminType == 1"
            type="info"
            size="small"
            disabled
            >无权操作</el-button
          >
          <!-- small -->
          <el-button
            v-if="
              viewSize.width <= viewSize.threshold &&
              (adminType == 0 || adminType == 2)
            "
            type="primary"
            size="small"
            icon="el-icon-edit"
            circle
            @click="editorOpen(scope.row.itemTitle, scope.row.itemValue)"
          ></el-button>
          <el-button
            v-if="viewSize.width <= viewSize.threshold && adminType == 1"
            type="info"
            size="small"
            icon="el-icon-edit"
            circle
            disabled
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- missing information -->
    <el-divider>待补充的信息</el-divider>
    <el-table :data="missingData" style="width: 100%">
      <el-table-column prop="itemTitle" label="信息"> </el-table-column>
      <el-table-column prop="itemValue" label="内容"></el-table-column>
      <el-table-column
        label="操作"
        :width="viewSize.width > viewSize.threshold ? 150 : 60"
      >
        <template slot-scope="scope">
          <!-- regular -->
          <el-button
            v-if="
              viewSize.width > viewSize.threshold &&
              (adminType == 0 || adminType == 2)
            "
            type="primary"
            size="small"
            @click="editorOpen(scope.row.itemTitle)"
            >添加</el-button
          >
          <el-button
            v-if="viewSize.width > viewSize.threshold && adminType == 1"
            type="info"
            size="small"
            disabled
            >无权操作</el-button
          >
          <!-- small -->
          <el-button
            v-if="
              viewSize.width <= viewSize.threshold &&
              (adminType == 0 || adminType == 2)
            "
            type="primary"
            size="small"
            icon="el-icon-plus"
            circle
            @click="editorOpen(scope.row.itemTitle)"
          ></el-button>
          <el-button
            v-if="viewSize.width <= viewSize.threshold && adminType == 1"
            type="info"
            size="small"
            icon="el-icon-edit"
            circle
            disabled
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- model views -->
    <div>
      <editorView
        v-if="editor.show"
        @close="editorClose"
        @commit="editorCommit"
        :currentValue="editor.value"
        :currentTitle="editor.title"
        :dialogVisible="editor.show"
      ></editorView>
      <passwdEditor
        v-if="editPasswd"
        :dialogVisible="editPasswd"
        @close="editPasswd = false"
      ></passwdEditor>
    </div>
  </div>
</template>

<script>
import editorView from "@/views/editorView";
import passwdEditor from "@/views/editorView/passwdEditor.vue";
export default {
  name: "infoView",
  props: {
    adminType: {
      type: Number,
      required: false,
      default: 0,
    },
    personID: {
      type: Number,
      required: false,
      default: -1,
    },
  },
  components: {
    editorView,
    passwdEditor,
  },
  data() {
    return {
      editPasswd: false,
      editor: {
        show: false,
        value: "",
        title: "",
      },
    };
  },
  computed: {
    viewSize() {
      return this.$store.state.viewSize;
    },
    configList() {
      return this.$store.state.dataConfig;
    },
    extentionData() {
      if (this.adminType > 0 && this.personID > -1) {
        return this.$store.state.fullData[this.personID].extentionData;
      }
      return this.$store.state.extentionData;
    },
    basicData() {
      if (this.adminType > 0 && this.personID > -1) {
        return this.$store.state.fullData[this.personID].basicData;
      }
      return this.$store.state.basicData;
    },
    age() {
      return this.FUNC.getAge(this.getItemValue("出生日期"));
      //   return this.FUNC.getAge(this.basicData.birth_date);
    },
    constellation() {
      return this.FUNC.getConstellation(this.getItemValue("出生日期"));
    },
    missingData() {
      let output = new Array();
      if (this.extentionData != null) {
        for (let i = 0; i < this.configList.length; i++) {
          let missing = true;
          for (let j = 0; j < this.extentionData.length; j++) {
            if (
              this.configList[i].is_basic ||
              this.configList[i].is_calc ||
              this.configList[i].title == this.extentionData[j].itemTitle
            ) {
              missing = false;
            }
          }
          if (missing) {
            output.push({
              itemTitle: this.configList[i].title,
              itemValue: "无内容",
            });
          }
        }
      }
      return output;
    },
    calcData() {
      let age_person = this.FUNC.getAge(this.getItemValue("出生日期"));
      let age_work_before = Number(this.getItemValue("入职前工龄"));
      let age_work = this.FUNC.getAge(this.getItemValue("入职时间"));
      let age_work_all = age_work_before + age_work;
      return [
        { itemTitle: "年龄", itemValue: age_person },
        { itemTitle: "本单位工龄", itemValue: age_work },
        { itemTitle: "总工龄", itemValue: age_work_all },
      ];
    },
    topData() {
      return [
        { itemTitle: "OA用户名", itemValue: this.basicData.clientName },
        { itemTitle: "工作证号", itemValue: this.basicData.number },
        { itemTitle: "管制员类型", itemValue: this.basicData.clientRank },
        { itemTitle: "所在科室", itemValue: this.basicData.clientOffice },
        { itemTitle: "所在班组", itemValue: this.basicData.clientGroup },
        { itemTitle: "身份证号", itemValue: this.getItemValue("身份证号") },
        { itemTitle: "出生日期", itemValue: this.getItemValue("出生日期") },
        { itemTitle: "性别", itemValue: this.getItemValue("性别") },
        { itemTitle: "民族", itemValue: this.getItemValue("民族") },
      ]
        .concat(this.calcData)
        .concat([{ itemTitle: "密码", itemValue: "******" }]);
    },
  },
  methods: {
    getItemValue(itemTitle) {
      for (let i = 0; i < this.extentionData.length; i++) {
        if (this.extentionData[i].itemTitle == itemTitle) {
          return this.extentionData[i].itemValue;
        }
      }
      return 0;
    },
    // new function
    editorOpen(title, value) {
      this.editor.value = value;
      this.editor.title = title;
      this.editor.show = true;
    },
    editorClose() {
      this.editor.value = "";
      this.editor.title = "";
      this.editor.show = false;
    },
    editorCommit(payload) {
      if (this.isDev) window.console.log(payload);
      let exist = false;
      for (let i = 0; i < this.extentionData.length; i++) {
        if (this.extentionData[i].itemTitle == payload.title) {
          exist = true;
        }
      }
      if (exist) {
        this.$store.dispatch("modifyItem", {
          number: this.basicData.number,
          clientName: this.basicData.clientName,
          itemTitle: payload.title,
          itemValue: payload.value,
        });
      } else {
        this.$store.dispatch("insertItem", {
          number: this.basicData.number,
          clientName: this.basicData.clientName,
          itemTitle: payload.title,
          itemValue: payload.value,
        });
      }
      this.$message({
        type: "success",
        message:
          "已将" +
          this.basicData.name +
          "的“" +
          payload.title +
          "”设置为“" +
          payload.value +
          "”",
      });
      this.editorClose();
    },
    deleteItem(itemTitle, itemValue) {
      this.$confirm(
        this.basicData.name +
          "的“" +
          itemTitle +
          "”已有数据“" +
          itemValue +
          "”，确认要将其吗？",
        "删除项目",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          customClass: "custom-message-box",
        }
      )
        .then(() => {
          this.$store.dispatch("deleteItem", {
            number: this.basicData.number,
            itemTitle: itemTitle,
          });
          this.$message({
            type: "success",
            message: this.basicData.name + "的“" + itemTitle + "”已删除！",
          });
        })
        .catch(() => {
          // this.$message({
          //   type: "info",
          //   message: "已取消删除",
          // });
        });
    },
    resetPasswd() {
      this.$confirm(
        "确认要将" + this.basicData.name + "的密码重置为“appapp”吗？",
        "重置密码",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          customClass: "custom-message-box",
        }
      )
        .then(() => {
          this.$store.dispatch("resetPasswd", {
            number: this.basicData.number,
          });
          this.$message({
            type: "success",
            message: "已将" + this.basicData.name + "的密码重置为“appapp”！",
          });
        })
        .catch(() => {
          // this.$message({
          //   type: "info",
          //   message: "已取消",
          // });
        });
    },
  },
};
</script>

<style scoped>
.head-img {
  width: 10em;
  border-radius: 10em;
  border: gray 1px solid;
}
.seperator-v {
  padding: 0.25em 1em;
}
.seperator-v-border {
  border-right: 1px solid lightgrey;
  padding: 0.25em 1em;
}
.section-dash {
  margin-top: 1.5em;
  padding-top: 1.5em;
  border-top: #ccc 1px dashed;
}
</style>
